<template>
	<view class="container">
		<view class="header">
			<view class="headerLeft"><svg t="1671676576814" class="icon" viewBox="0 0 1024 1024" version="1.1"
					xmlns="http://www.w3.org/2000/svg" p-id="3518" width="20" height="20">
					<path
						d="M512 958.016611c-119.648434 0-232.1288-46.367961-316.736783-130.559656-84.640667-84.255342-131.263217-196.255772-131.263217-315.455235 0-119.168499 46.624271-231.199892 131.232254-315.424271 84.607983-84.191695 197.088348-130.559656 316.736783-130.559656s232.1288 46.367961 316.704099 130.559656c84.67163 84.224378 131.263217 196.255772 131.263217 315.391587 0.032684 119.199462-46.591587 231.232576-131.263217 315.455235C744.1288 911.615966 631.648434 958.016611 512 958.016611zM512 129.983389c-102.623626 0-199.071738 39.743475-271.583282 111.936783-72.480581 72.12794-112.416718 168.063432-112.416718 270.079828s39.903454 197.951888 112.384034 270.047144c72.511544 72.191587 168.959656 111.936783 271.583282 111.936783 102.592662 0 199.071738-39.743475 271.583282-111.936783 72.480581-72.160624 112.416718-168.063432 112.384034-270.079828 0-102.016396-39.903454-197.919204-112.384034-270.016181C711.071738 169.759548 614.592662 129.983389 512 129.983389z"
						fill="#ffffff" p-id="3519"></path>
					<path
						d="M736.00086 480.00086 544.00086 480.00086 544.00086 288.00086c0-17.664722-14.336138-32.00086-32.00086-32.00086s-32.00086 14.336138-32.00086 32.00086l0 192L288.00086 480.00086c-17.664722 0-32.00086 14.336138-32.00086 32.00086s14.336138 32.00086 32.00086 32.00086l192 0 0 192c0 17.695686 14.336138 32.00086 32.00086 32.00086s32.00086-14.303454 32.00086-32.00086L544.00258 544.00086l192 0c17.695686 0 32.00086-14.336138 32.00086-32.00086S753.696546 480.00086 736.00086 480.00086z"
						fill="#ffffff" p-id="3520"></path>
				</svg></view>
			<scroll-view class="scroll-view_H" scroll-x="true" ref="chooseHeader" @scroll="scrollHeader"
				scroll-left="120">
				<view id="demo1" class="scroll-view-item_H uni-bg-red" @click="headerFirst(0)">济南</view>
				<view id="demo2" class="scroll-view-item_H uni-bg-green" @click="headerSecond(1)">探索</view>
				<view id="demo3" class="scroll-view-item_H uni-bg-blue" @click="headerSecond(2)">世界杯</view>
				<view id="demo1" class="scroll-view-item_H uni-bg-red" @click="headerForth(3)">关注</view>
				<view id="demo2" class="scroll-view-item_H uni-bg-green" @click="headerFifth(4)">商城</view>
				<view class="scroll-view-item_H" @click="headerSixth(5)">推荐</view>
			</scroll-view>
			<view class="headerRight" @click="goSearch"><svg t="1671676611758" class="icon" viewBox="0 0 1024 1024"
					version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4498" width="20" height="20">
					<path
						d="M756.565333 697.258667c2.133333 1.493333 4.224 3.157333 6.101334 5.12l241.664 241.621333c16.256 16.256 16.512 43.52-0.128 60.16a42.453333 42.453333 0 0 1-60.202667 0.170667l-241.664-241.664a41.429333 41.429333 0 0 1-5.034667-6.101334A424.917333 424.917333 0 0 1 426.666667 853.333333C191.018667 853.333333 0 662.314667 0 426.666667S191.018667 0 426.666667 0s426.666667 191.018667 426.666666 426.666667c0 102.698667-36.266667 196.949333-96.768 270.592zM426.666667 768a341.333333 341.333333 0 1 0 0-682.666667 341.333333 341.333333 0 0 0 0 682.666667z"
						fill="#ffffff" p-id="4499"></path>
				</svg></view>
		</view>

		<view class="content">
			<swiper class="swiper" @change="swiperChange" ref="swiperCurrent" :current="current">
				<swiper-item>
					<swiper :vertical="true" class="swiper" @change="changeVertical">
						<swiper-item class="swiperItem" v-for="item in videoList2">
							<video :enable-progress-gesture="false" objectFit="cover" class="video"
								:show-progress="false" :show-play-btn="false" mobilenet-hint-type="1"
								play-btn-position="center" :src="item.src"></video>
						</swiper-item>
					</swiper>

				</swiper-item>
				<swiper-item>
					<swiper :vertical="true" class="swiper" @change="changeVertical">
						<swiper-item class="swiperItem" v-for="item in videoList">
							<video :enable-progress-gesture="false" objectFit="cover" class="video"
								:show-progress="false" :show-play-btn="false" mobilenet-hint-type="1"
								play-btn-position="center" :src="item.src"></video>
						</swiper-item>
					</swiper>

				</swiper-item>
				<swiper-item>
					<swiper :vertical="true" class="swiper" @change="changeVertical">
						<swiper-item class="swiperItem" v-for="item in videoList2">
							<video :enable-progress-gesture="false" objectFit="cover" class="video"
								:show-progress="false" :show-play-btn="false" mobilenet-hint-type="1"
								play-btn-position="center" :src="item.src"></video>
						</swiper-item>
					</swiper>

				</swiper-item>
				<swiper-item>
					<swiper :vertical="true" class="swiper" @change="changeVertical">
						<swiper-item class="swiperItem" v-for="item in videoList">
							<video :enable-progress-gesture="false" objectFit="cover" class="video"
								:show-progress="false" :show-play-btn="false" mobilenet-hint-type="1"
								play-btn-position="center" :src="item.src"></video>
						</swiper-item>
					</swiper>

				</swiper-item>
				<swiper-item>
					<swiper :vertical="true" class="swiper" @change="changeVertical">
						<swiper-item class="swiperItem" v-for="item in videoList2">
							<video :enable-progress-gesture="false" objectFit="cover" class="video"
								:show-progress="false" :show-play-btn="false" mobilenet-hint-type="1"
								play-btn-position="center" :src="item.src"></video>
						</swiper-item>
					</swiper>

				</swiper-item>
				<swiper-item>
					<swiper :vertical="true" class="swiper" 
						@change="changeVertical('tuijian',$event)" current-item-id="tuijian">
						<swiper-item class="swiperItem" v-for="(item,index) in videoList" :current="index" :current-item-id="item.id">
							<video :loop="videoIndex==index" :id="item.id" :enable-progress-gesture="false" objectFit="cover" class="video"
								:show-progress="false" :show-play-btn="false" mobilenet-hint-type="1"
								play-btn-position="center" :src="item.src" @play="videoPlay" @pause="videoPause" @click="touchVideo"></video>
						</swiper-item>
					</swiper>
				</swiper-item>

			</swiper>
		</view>
		<listOpreator :isShowList="isShowList" />
	</view>
</template>

<script setup lang="ts">
	import {
		ref,
		reactive,
		onMounted,
	} from "vue";
	import listOpreator from '../../components/ListOpreator.vue'
	components: {
		listOpreator
	}
	let videoContext=ref(null)
	let videoIndex=ref(0)
	let isShowList = ref < boolean > (true)
	let swiperCurrent = ref < object > (null)
	let current = ref < number > (5)
	let chooseHeader = ref < object > (null)
	let recordChangeSize = ref < number > (0)
	let isVideoPlay=ref<boolean>(true)
	// let isVideoStop=ref<boolean>(true)
	const swiperChange = (c1: object, c2: object) => {
		if (recordChangeSize.value != null) {
			chooseHeader.value.$el.children[0].children[0].children[0].children[recordChangeSize.value].classList
				.remove('fontSize')
		}
		recordChangeSize.value = c1.detail.current
		chooseHeader.value.$el.children[0].children[0].children[0].children[c1.detail.current].classList.add(
			'fontSize')
	}
	const videoPause=()=>{
		isVideoPlay.value=false
	}
	const videoPlay=()=>{
		 isVideoPlay.value=true
	}
	const goSearch: Function = () => {
		uni.navigateTo({
			url: '/pages/search/search'
		})
	}
	const touchVideo=()=>{
		if(isVideoPlay.value){
			videoContext.value.pause()
			isVideoPlay.value=false
		}else{
			videoContext.value.play()
			isVideoPlay.value=true
		}
	}
	const changeVertical: Function = (type:string,e) => {
		videoIndex.value=Number(e.detail.current)
		console.log(videoIndex.value)
		isShowList.value = false
		let id:number=Number(e.detail.current)+1
		if(videoContext.value!=null){
			videoContext.value.pause()
		}
		videoContext.value=uni.createVideoContext(type+id,this)
		console.log(videoContext.value)
		videoContext.value.play()
		setTimeout(() => {
			isShowList.value = true
		}, 300)
	}

	const headerFirst = (number: string) => {
		current.value = number
	}


	const scrollHeader = () => {

	}

	const headerSecond = (number: string) => {
		current.value = number
	}

	const headerThird = (number: string) => {
		current.value = number
	}

	const headerForth = (number: string) => {
		current.value = number
	}

	const headerFifth = (number: string) => {
		current.value = number
	}
	const headerSixth = (number: string) => {
		current.value = number
	}
	type videoListType = {
		src: string,
		id: string
	}
	const videoList: videoListType[] = reactive([{
			id: 'tuijian1',
			src: 'https://douyin-fbk.oss-cn-hangzhou.aliyuncs.com/VCG42N1422310449.mp4'
		},
		{
			id: 'tuijian2',
			src: 'https://douyin-fbk.oss-cn-hangzhou.aliyuncs.com/VCG42N1423632906.mp4'
		},
		{
			id: 'tuijian3',
			src: 'https://douyin-fbk.oss-cn-hangzhou.aliyuncs.com/VCG42N1428630188.mp4'
		},
		{
			id: 'tuijian4',
			src: 'https://douyin-fbk.oss-cn-hangzhou.aliyuncs.com/VCG42N1422310449.mp4'
		},
		{
			id: 'tuijian5',
			src: 'https://douyin-fbk.oss-cn-hangzhou.aliyuncs.com/VCG42N1423632906.mp4'
		},
		{
			id: 'tuijian6',
			src: 'https://douyin-fbk.oss-cn-hangzhou.aliyuncs.com/VCG42N1428630188.mp4'
		}
	])
	const videoList2: videoListType[] = reactive([{
			id: 'video7',
			src: 'https://douyin-fbk.oss-cn-hangzhou.aliyuncs.com/VCG42N1422310449.mp4'
		},
		{
			id: 'video8',
			src: 'https://douyin-fbk.oss-cn-hangzhou.aliyuncs.com/VCG42N1423632906.mp4'
		},
		{
			id: 'video9',
			src: 'https://douyin-fbk.oss-cn-hangzhou.aliyuncs.com/VCG42N1428630188.mp4'
		},
		{
			id: 'video10',
			src: 'https://douyin-fbk.oss-cn-hangzhou.aliyuncs.com/VCG42N1422310449.mp4'
		},
		{
			id: 'video11',
			src: 'https://douyin-fbk.oss-cn-hangzhou.aliyuncs.com/VCG42N1423632906.mp4'
		},
		{
			id: 'video12',
			src: 'https://douyin-fbk.oss-cn-hangzhou.aliyuncs.com/VCG42N1428630188.mp4'
		}
	])
</script>

<style scoped lang="scss">
	body,
	html {
		width: 100%;
		height: 100%;
		padding: 0px;
		border: 0px;
	}

	.container {
		width: 100%;
		height: 100vh;
		background-color: black;
	}

	.header {
		font-size: 15px;
		line-height: 50px;
		color: white;
		width: 100%;
		height: 50px;
		display: flex;
		// background-color: red;
		position: absolute;
		top: 0px;
		left: 0px;
		right: 0px;
		z-index: 10000;

		.scroll-view_H {
			white-space: nowrap;
			width: 70%;
			margin: 0 auto;
		}

		.scroll-view-item_H {
			display: inline-block;
			width: 25%;
			text-align: center;
		}

		.headerLeft,
		.headerRight {
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			line-height: 50px;
		}
	}

	.footer {
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: 50px;
		background-color: red;

	}

	.content {
		width: 100%;
		height: 100%;
		// background-color: #1B2631 ;

		ul {
			border: 0px;
			width: 100%;
			height: 300%;
			list-style-type: none;
			padding: 0px;

			li {
				width: 100%;
				height: 100%;
				background-color: red;
			}
		}
	}

	.swiper {
		padding: 0px;
		border: 0px;
		width: 100%;
		height: 100%;
		overflow-y: hidden;
		position: absolute;
	}

	.swiperItem {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		height: 100%;
		overflow-y: hidden;

		.video {
			width: 100%;
			height: 100%;
		}
	}

	.fontSize {
		font-weight: 1000;
	}
</style>
